<template>
  <!--  歌曲列表-->
  <div class="songList">
    <ul>
      <!--      <li v-for="(item,index) in list " :key="index">-->
      <!--        <img :src="item.pic_big" alt="">-->
      <!--        <p>{{item.title}}</p>-->
      <!--      </li>-->


      <!--      <router-link tag="li" to="/playSong" v-for="(item,index) in list" :key="index">-->
      <router-link tag="li" :to="{path:'playSong',query:{songId:item.song_id}}" v-for="(item,index) in list"
        :key="index">
        <img :src="item.pic_big" alt="">
        <p>{{ item.title }}</p>
      </router-link>
    </ul>
  </div>
</template>


<script>
  // import  axios from "axios"
  import {
    getSongList
  } from "../api/api"

  export default {
    name: "SongList",
    props: ["type", "size"],
    data() {
      return {
        list: [],
      }
    },

    created() {
      //同源策略
      // axios.get(`/api/v1/restserver/ting?method=baidu.ting.billboard.billList&type=${this.type}&size=${this.size}`).then(res =>{
      //   this.list = res.data.song_list;
      //   console.log(res)
      //
      // })

      getSongList(this.type, this.size).then(res => {
        this.list = res.song_list;
        // console.log(res)

      })
    }
  }
</script>

<style scoped lang="less">
  .songList ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    padding: 10px;

    li {
      width: calc(100% / 3);
      padding: 0 5px;
      box-sizing: border-box;

      img {
        width: 100%
      }
    }

    p {
      margin: 0;
      font-size: 14px;
      color: #999;
    }
  }

  .songList {
    background-color: #f9f9f9;
  }
</style>